<template>
  <div class="forum-container">

    <!-- 搜索框 -->
    <el-input v-model="searchQuery" placeholder="搜索帖子" class="search-input" />

    <!-- 帖子列表 -->
    <div class="post-list">
      <div v-for="(post, index) in filteredPosts" :key="index" class="post-item">
        <div class="post-header">
          <el-avatar :src="post.avatar_url" size="30" />
          <span class="post-author">{{ post.author_name }}</span>
          <span class="post-date">{{ api_functions.getDateTransform(new Date(post.create_time)) }}</span>
        </div>
        <h3>{{ post.title }}</h3>
        <p>{{ post.content }}</p>
        <div class="post-meta">
          <el-button @click="toggleComments(index)">评论 ({{ post.comments_count }})</el-button>
          <el-button @click="likePost(index)">{{ post.is_liked ? '已点赞' : '点赞' }} ({{ post.likes }}) </el-button>
        </div>

        <!-- 评论区域 -->
        <div v-if="post.showComments" class="comment-section">
          <el-input v-model="post.newComment" placeholder="请输入评论内容" class="comment-input" />
          <el-button @click="addComment(index)">发表评论</el-button>
          <div class="comment-list">
            <div v-for="(comment, cIndex) in post.comments" :key="cIndex" class="comment-item">
              <el-avatar :src="comment.avatar_url" size="25" />
              <span class="comment-author">{{ comment.author_name }}</span>
              <span class="comment-content">{{ comment.content }}</span>
              <!-- <el-button @click="likeComment(index, cIndex)">点赞 ({{ comment.likes }})</el-button> -->
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- 发帖区域 -->
    <div class="post-form">
      <el-input v-model="newPostTitle" placeholder="请输入帖子标题" class="post-input" />
      <el-input v-model="newPostContent" type="textarea" placeholder="请输入帖子内容" class="post-input" />
      <el-button type="primary" @click="addPost">发布帖子</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import api from '@/api/axios.js'
import api_functions from '@/api/functions.js'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

const newPostTitle = ref('')
const newPostContent = ref('')
const searchQuery = ref('')
const posts = ref([])
const store = useStore()

// 过滤帖子
const filteredPosts = computed(() => {
  return posts.value.filter(post => post.title.includes(searchQuery.value) || post.content.includes(searchQuery.value))
})

// 添加帖子
const addPost = async () => {
  if (newPostTitle.value.trim() && newPostContent.value.trim()) {
    const { data: { data } } = await api.createPost({
      title: newPostTitle.value,
      content: newPostContent.value
    })
    posts.value.unshift({
      title: newPostTitle.value,
      content: newPostContent.value,
      author_name: store.state.user.author_name,
      create_time: new Date(),
      avatar_url: store.state.user.avatar_url || '/avatar.jpg',
      comments: [],
      showComments: false,
      newComment: '',
      likes: 0
    })
    posts.value[0].post_id = data.post_id
    newPostTitle.value = ''
    newPostContent.value = ''
    ElMessage.success('发帖成功')
  }
}

// 切换评论显示
const toggleComments = async (index) => {
  posts.value[index].showComments = !posts.value[index].showComments
  if (posts.value[index].showComments) {
    const { data: { data } } = await api.getPostComments({
      post_id: posts.value[index].post_id
    })
    posts.value[index].comments = data
    console.log('data', data)
  }
}

// 添加评论
const addComment = async (index) => {
  const post = posts.value[index]
  if (post.newComment.trim()) {
    await api.createComment({
      content: post.newComment,
      post_id: post.post_id
    })
    post.comments.unshift({
      content: post.newComment,
      author_name: store.state.user.author_name,
      avatar_url: store.state.user.avatar_url || '/avatar.jpg'
    })
    post.comments_count++
    post.newComment = ''
    ElMessage.success('评论成功')
  }
}

// 点赞帖子
const likePost = async (index) => {
  try {
    await api.togglePostLike({
      post_id: posts.value[index].post_id
    })
    if (!posts.value[index].is_liked) {
      posts.value[index].likes++
      ElMessage.success('点赞成功')
    } else {
      posts.value[index].likes--
      ElMessage.success('取消点赞')
    }
    posts.value[index].is_liked = !posts.value[index].is_liked
  } catch (error){

  }
}

// 点赞评论
// const likeComment = (postIndex, commentIndex) => {
//   posts.value[postIndex].comments[commentIndex].likes++
// }

onMounted(async () => {
  const { data: { data } } = await api.getForumPosts()
  posts.value = data.list.map(item => ({
    ...item,
    comments: [],
    showComments: false,
    newComment: ''
  }))
})

</script>

<style scoped>
.forum-container {
  padding: 20px;
  width: 100%;
  height: 100%;
  margin: auto;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

h1 {
  text-align: center;
  color: #333;
}

.search-input {
  margin-bottom: 20px;
}

.post-form {
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.post-input {
  margin-bottom: 10px;
}

.post-list {
  flex-grow: 1;
  overflow-y: auto;
}

.post-item {
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #fff;
  transition: box-shadow 0.3s;
}

.post-item:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.post-author {
  margin-left: 10px;
  font-weight: bold;
}

.post-date {
  margin-left: auto;
  font-size: 12px;
  color: #888;
}

.post-meta {
  margin-top: 10px;
}

.comment-section {
  margin-top: 10px;
  padding: 10px;
  border-top: 1px solid #e0e0e0;
}

.comment-input {
  margin-bottom: 10px;
}

.comment-list {
  margin-top: 10px;
}

.comment-item {
  display: flex;
  align-items: center;
  padding: 5px;
  border-bottom: 1px solid #e0e0e0;
}

.comment-author {
  margin-left: 10px;
  font-weight: bold;
}

.comment-content {
  margin-left: 10px;
}

.comment-item button {
  margin-left: auto;
}
</style>
